<template>
  <div class="patientCard-container">
    <el-card shadow="hover">
      <!-- style="position: absolute; top: 8px; right: 8px" -->
      <el-tag :type="tagsWithStatus(item.status)" size="small">
        {{ titleWithStatus(item.status) }}
      </el-tag>
      <div class="patient-info">
        <div class="info-header">
          <avatar :src="item.headPortrait" :userId="item.id"></avatar>
        </div>
        <div class="info-desc">
          <h3>
            <div class="desc_pointer">{{ item.name }}</div>
            <span>{{ item.ageName }}</span>
          </h3>
          <p>科室: {{ item.departmentName }}</p>
          <p v-if="item.registrationDate">
            挂号日期:
            {{
              item.registrationDate
                ? initTime(item.registrationDate)
                : '暂无数据'
            }}
          </p>
          <p>
            接诊日期:
            {{ item.receptionDate ? initTime(item.receptionDate) : '暂无数据' }}
          </p>
          <p>
            结束日期: {{ item.endDate ? initTime(item.endDate) : '暂无数据' }}
          </p>
        </div>
      </div>
      <div class="foot-dropdown" :class="{ 'risk-foot-dropdown': risk }">
        <el-button type="info" @click="reception">
          <!-- 兼容火狐下 多0.5px -->

          {{ item.status === 3 ? '查看' : risk ? '风险筛查' : '接诊' }}
        </el-button>
        <el-dropdown v-if="!risk" style="height: 100%; width: 50%">
          <el-button type="info" style="width: 100%">
            更多菜单
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="edit(1)" v-if="item.status !== 3">
                修改登记科室
              </el-dropdown-item>
              <el-dropdown-item @click="edit(2)" v-if="item.status === 3">
                {{ risk ? '快速风险筛查' : '快速接诊' }}
              </el-dropdown-item>
              <el-dropdown-item @click="change">转诊</el-dropdown-item>
              <el-dropdown-item
                @click="edit(3)"
                v-if="item.historicalVisitId && item.status !== 3"
              >
                结束就诊
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-card>
    <referral-out v-model="isReferral"></referral-out>
  </div>
</template>
<script>
  import { ref } from '@vue/reactivity'
  import { computed } from '@vue/runtime-core'
  import moment from 'moment'
  import { ArrowDown } from '@element-plus/icons-vue'
  import { useRouteAndRouter } from '@/hooks/core/useRouteAndRouter.js'
  import { useRouters } from '@/hooks/core/useRouters.ts'
  import { useRiskAndEmr } from '@/hooks/event/useRiskAndEmr.js'
  export default {
    name: 'patientCard',
    props: { item: Object },
    emits: ['select'],
    components: { ArrowDown },
    setup(props, context) {
      const edit = function (type) {
        context.emit('select', {
          key: type,
          value: props.item.id,
          historicalVisitId: props.item.historicalVisitId,
          medicalRecordId: props.item.medicalRecordId,
        })
      }
      // 需要将风险筛查的hook整去局部
      const { isRiskRx } = useRouteAndRouter()
      const risk = isRiskRx
      const { go } = useRouters()
      const { useStatus, useTags } = useRiskAndEmr(risk)
      const reception = function () {
        const { status, id, historicalVisitId: vid, type: vtype } = props.item
        const { riskMedicalRecordId, medicalRecordId, historicalVisitRiskId } =
          props.item
        if (risk.value) {
          let query = { id, vid: historicalVisitRiskId, vtype }
          // 风险筛查的时候 只用加载默认id 并不需要riskId
          if (riskMedicalRecordId) query['emrId'] = riskMedicalRecordId
          go({ name: 'riskWithMedicalRecord', query })
        } else {
          let query = { id, vid, vtype }
          // 正常填写病历的时候，需要加载默认id和风险筛查id
          if (medicalRecordId) query['emrId'] = medicalRecordId
          if (status === 3) {
            go({ name: 'patientInfo', query: { id } })
          } else {
            go({ name: 'medicalRecord', query })
          }
        }
      }

      // 转诊单
      const isReferral = ref(false)
      const change = function () {
        isReferral.value = true
      }

      function titleWithStatus(status) {
        return useStatus(status)
      }

      function tagsWithStatus(status) {
        return useTags(status)
      }
      const initTime = function (str) {
        return moment(str).format('YYYY-MM-DD HH:mm')
      }

      return {
        edit,
        reception,
        isReferral,
        change,
        tagsWithStatus,
        initTime,
        risk,
        titleWithStatus,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .patientCard-container {
    width: 300px;
    height: 170px;
    margin-left: 16px;
    margin-bottom: 16px;
    .el-card {
      position: relative;
      .el-tag {
        position: absolute;
        right: 2px;
        top: 2px;
      }
    }
    .patient-info {
      height: 130px;
      padding: 20px 20px 0px;
      display: flex;
      justify-content: space-around;
      position: relative;
      .info-header {
        width: 60px;
        height: 60px;
        // background-color: black;
        margin-right: 16px;
      }
      .info-desc {
        display: inline-block;
        flex: 1;
        overflow: hidden;
        .desc_pointer {
          cursor: pointer;
        }
        h3 {
          font-size: 16px;
          color: #303133;
          font-weight: 500;
          margin-bottom: 16px;
          margin-top: 0;
          display: flex;
          align-items: baseline;
          line-height: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          p {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            white-space: nowrap;
            max-width: 80px;
            vertical-align: bottom;
          }
          span {
            font-size: 13px;
            color: #909399;
            margin-left: 7px;
            font-weight: 400;
          }
        }
        > p {
          font-size: 13px;
          color: #909399;
          margin-bottom: 4px;
          margin-top: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        // width: 77%;
        // padding: 0px 10px;
        // position: relative;
      }
    }
    :deep(.el-card__body) {
      padding: 0;
    }
    .foot-dropdown {
      display: flex;
      .el-button {
        height: 40px;
        width: 50%;
        border-radius: 0px;
        background-color: #f9fafc;
        // border-radius: 0 0 4px 4px;
        border: 1px solid #e4e7ed;
        color: #909399;
      }
      .el-dropdown {
        .el-button {
          width: 149px;
        }
      }
    }
    .risk-foot-dropdown {
      .el-button {
        width: 100%;
      }
    }
  }
</style>
